<template>
  <div class="page">
    <h1>TimePicker 时间选择器</h1>
    <p>选择或输入标准时间，支持选择范围。</p>
    <h2>基础用法</h2>
    <TimePicker type="time" placeholder="选择时间"></TimePicker>
    <TimePicker type="timerange" placement="bottom-end" placeholder="选择时间"></TimePicker>
    <p>设置属性 <code>type</code> 为 <code>time</code> 或 <code>timerange</code> 分别显示选择单个时间和选择范围时间类型。</p>
    <p>设置属性 <code>placement</code> 可以更改选择器出现的方向，与 <code>Poptip</code> 和 <code>Tooltip</code> 配置一致，支持 12 个方向，详见 API。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;TimePicker type=&quot;time&quot; placeholder=&quot;选择时间&quot;&gt;&lt;/TimePicker&gt;
        &lt;TimePicker type=&quot;timerange&quot; placement=&quot;bottom-end&quot; placeholder=&quot;选择时间&quot;&gt;&lt;/TimePicker&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>时间格式</h2>
    <TimePicker type="time" placeholder="选择时间" format="HH点mm分ss秒"></TimePicker>
    <TimePicker type="timerange" placeholder="选择时间" format="HH’mm’ss"></TimePicker>
    <p>设置属性 <code>format</code> 可以改变时间的显示格式。</p>
    <p>注意，<code>format</code> 只是改变显示的格式，并非改变 <code>value</code> 值。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;TimePicker type=&quot;time&quot; placeholder=&quot;选择时间&quot; format=&quot;HH点mm分ss秒&quot;&gt;&lt;/TimePicker&gt;
        &lt;TimePicker type=&quot;timerange&quot; placeholder=&quot;选择时间&quot; format=&quot;HH&rsquo;mm&rsquo;ss&quot;&gt;&lt;/TimePicker&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>选择时分</h2>
    <TimePicker type="time" placeholder="选择时间" format="HH:mm"></TimePicker>
    <TimePicker type="timerange" placeholder="选择时间" format="HH:mm"></TimePicker>
    <p>组件浮层中的列会随着 <code>format</code> 变化，当略去 <code>format</code> 中的秒时，浮层中对应的列也会消失。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;TimePicker type=&quot;time&quot; placeholder=&quot;选择时间&quot; format=&quot;HH:mm&quot;&gt;&lt;/TimePicker&gt;
        &lt;TimePicker type=&quot;timerange&quot; placeholder=&quot;选择时间&quot; format=&quot;HH:mm&quot;&gt;&lt;/TimePicker&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>不可选时间</h2>
    <TimePicker
      type="time"
      placeholder="选择时间"
      :disabled-hours="[1,5,10]"
      :disabled-minutes="[0,10,20]"></TimePicker>
    <TimePicker
      type="timerange"
      placeholder="选择时间"
      hide-disabled-options
      :disabled-hours="[1,5,10]"
      :disabled-minutes="[0,10,20]"></TimePicker>
    <p>可以使用 <code>disabled-hours</code> 、<code>disabled-minutes</code> 、<code>disabled-seconds</code>  组合禁止用户选择某个时间。</p>
    <p>使用 <code>hide-disabled-options</code> 可以直接把不可选择的项隐藏。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;TimePicker
          type=&quot;time&quot;
          placeholder=&quot;选择时间&quot;
          :disabled-hours=&quot;[1,5,10]&quot;
          :disabled-minutes=&quot;[0,10,20]&quot;&gt;&lt;/TimePicker&gt;
        &lt;TimePicker
          type=&quot;timerange&quot;
          placeholder=&quot;选择时间&quot;
          hide-disabled-options
          :disabled-hours=&quot;[1,5,10]&quot;
          :disabled-minutes=&quot;[0,10,20]&quot;&gt;&lt;/TimePicker&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>带有确认操作</h2>
    <TimePicker type="time" placeholder="选择时间" confirm ></TimePicker>
    <TimePicker type="timerange" placeholder="选择时间" confirm ></TimePicker>
    <p>设置属性 <code>confirm</code> ，选择器会有清空和确定按钮。</p>
    <p>确认按钮并没有影响时间的正常选择。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;TimePicker type=&quot;time&quot; placeholder=&quot;选择时间&quot; confirm &gt;&lt;/TimePicker&gt;
        &lt;TimePicker type=&quot;timerange&quot; placeholder=&quot;选择时间&quot; confirm &gt;&lt;/TimePicker&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>手动控制组件</h2>
    <TimePicker
      :open="open"
      :value="value3"
      confirm
      @on-change="handleChange"
      @on-clear="handleClear"
      @on-ok="handleOk">
      <a href="javascript:void(0)" style="text-decoration:none;" @click="handleClick">
        <Icon type="icon-time"></Icon>
        <template v-if="value3 === ''">选择时间</template>
        <template v-else>{{ value3 }}</template>
      </a>
    </TimePicker>
    <p>对于一些定制化的场景，可以使用 <code>slot</code> 配合参数 <code>open</code> 、<code>confirm</code> 及事件来手动控制组件的显示状态，详见示例和 API。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;TimePicker
          :open=&quot;open&quot;
          :value=&quot;value3&quot;
          confirm
          @on-change=&quot;handleChange&quot;
          @on-clear=&quot;handleClear&quot;
          @on-ok=&quot;handleOk&quot;&gt;
          &lt;a href=&quot;javascript:void(0)&quot; style=&quot;text-decoration:none;&quot; @click=&quot;handleClick&quot;&gt;
            &lt;Icon type=&quot;icon-time&quot;&gt;&lt;/Icon&gt;
            &lt;template v-if=&quot;value3 === ''&quot;&gt;选择时间&lt;/template&gt;
            &lt;template v-else&gt;{{ value3 }}&lt;/template&gt;
          &lt;/a&gt;
        &lt;/TimePicker&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            open: false,
            value3: ''
          }
        },
        methods: {
          handleClick () {
            this.open = !this.open;
          },
          handleChange (time) {
            this.value3 = time;
          },
          handleClear () {
            this.open = false;
          },
          handleOk () {
            this.open = false;
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>尺寸</h2>
    <TimePicker type="time" placeholder="选择时间" size="large"></TimePicker>
    <TimePicker type="time" placeholder="选择时间" size="small"></TimePicker>
    <p>通过设置属性 <code>size</code> 为 <code>large</code> 或 <code>small</code> 可以调整选择器尺寸为大或小，不设置默认为 <code>large</code> 。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;TimePicker type=&quot;time&quot; placeholder=&quot;选择时间&quot; size=&quot;large&quot;&gt;&lt;/TimePicker&gt;
        &lt;TimePicker type=&quot;time&quot; placeholder=&quot;选择时间&quot; size=&quot;small&quot;&gt;&lt;/TimePicker&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>API</h2>
    <p>TimePicker props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <p>TimePicker events</p>
    <Table :columns="tableColumn1" :data="tableData1"></Table>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      open: false,
      value3: '',
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain',
          tooltip: true
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData: [
        {
          attribute: 'type',
          explain: '显示类型，可选值为 time、timerange',
          type: 'String',
          default: 'time'
        },
        {
          attribute: 'value',
          explain: '时间，可以是 JavaScript 的 Date',
          type: 'Date',
          default: '-'
        },
        {
          attribute: 'format',
          explain: '展示的时间格式',
          type: 'Date',
          default: 'HH:mm:ss'
        },
        {
          attribute: 'placement',
          explain: '时间选择器出现的位置，可选值为top,top-start,top-end,bottom,bottom-start,bottom-end,left,left-start,left-end,right,right-start,right-end',
          type: 'String',
          default: 'bottom-start'
        },
        {
          attribute: 'placeholder',
          explain: '占位文本',
          type: 'String',
          default: '空'
        },
        {
          attribute: 'confirm',
          explain: '是否显示底部控制栏',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'open',
          explain: '手动控制时间选择器的显示状态，true 为显示，false 为收起。',
          type: 'Boolean',
          default: 'null'
        },
        {
          attribute: 'size',
          explain: '尺寸，可选值为large和small或者不设置',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'disabled',
          explain: '是否禁用选择器',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'clearable',
          explain: '是否显示清除按钮',
          type: 'Boolean',
          default: 'true'
        },
        {
          attribute: 'readonly',
          explain: '完全只读，开启后不会弹出选择器，只在没有设置 open 属性下生效',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'editable',
          explain: '文本框是否可以输入，只在没有使用 slot 时有效',
          type: 'Boolean',
          default: 'true'
        }
      ],
      tableColumn1: [
        {
          title: '事件名称',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain'
        },
        {
          title: '回调参数',
          key: 'callBack'
        }
      ],
      tableData1: [
        {
          attribute: 'on-change',
          explain: '时间发生变化时触发',
          callBack: '已经格式化后的时间，比如 09:41:00'
        },
        {
          attribute: 'on-open-change',
          explain: '弹出浮层和关闭浮层时触发',
          callBack: 'true | false'
        },
        {
          attribute: 'on-ok',
          explain: '点击确定按钮时触发',
          callBack: '-'
        },
        {
          attribute: 'on-clear',
          explain: '在清空日期时触发',
          callBack: '-'
        }
      ]
    }
  },
  methods: {
    handleClick () {
      this.open = !this.open
    },
    handleChange (time) {
      this.value3 = time
    },
    handleClear () {
      this.open = false
    },
    handleOk () {
      this.open = false
    }
  }
}
</script>
<style scoped>
h1 {
  font-size: 18px;
}
h2 {
  font-size: 14px;
  margin-bottom: 10px;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
span {
  margin-left: 10px;
}
p {
  padding: 5px 0;
}
</style>
